<template>
  <div class="app-container">
    <div class="container-fluid main profile">
      <div class="row">

        <!--左边主要内容-->
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
          <!--正文-->
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h3 class="question-title">{{ question.title }}</h3>
            <span class="text-desc">
                作者：<span>{{ question.userName }}</span> |
                发布时间：<span>{{ question.gmtCreate }}</span>
              <!--                阅读数： <span></span>-->
            </span>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <!--内容-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="question-view" >
            <span v-html="question.content"></span>

            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
              <a target="_blank"
                 style="color: #A00;font-weight: bold;"></a>
            </div>

            <!--标签-->
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <span class="question-tag">
                        <a
                        ></a>
                    </span>
            </div>

            <!--编辑-->
          </div>

          <!--回复-->
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h4>
              <span>{{ answerList.length }}</span> 个回复
            </h4>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comments" v-for="answer in answerList" :key="answer.id">
              <div class="media">
                <div class="media-left">
                  <a href="#">
                    <img class="media-object img-rounded" :src="OSS_PATH+answer.userAvatar">
                  </a>
                </div>
                <div class="media-body">
                  <h5 class="media-heading">
                    <span style="font-weight:900">{{ answer.userName }}</span>
                  </h5>
                  <div>{{ answer.content }}</div>
                  <div class="menu">
                    <!--                    <span class="glyphicon glyphicon-thumbs-up icon"></span>-->
                    <span
                      @click="collapseComments(answer)" class="comment-icon">
                      <span class="glyphicon glyphicon-comment"></span>
<!--                                    <span>{{ answer.comments.length }}</span>-->
                       <span>{{ answer.commentsSize }}</span>
                                </span>
                    <span class="pull-right">{{ answer.gmtCreate }}</span>
                    <!--                    <span class="pull-right" v-for="comment in answer.comments" :key="comment.id"-->
                    <!--                    >{{comment.content}}</span>-->
                  </div>
                  <!--二级评论-->
                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12  sub-comments" v-if="answer.showComments"
                  >
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comments" v-for="comment in answer.comments"
                         :key="comment.id">
                      <div class="media">
                        <div class="media-left">
                          <a href="#">
                            <img class="media-object img-rounded" :src="OSS_PATH+comment.userAvatar">
                          </a>
                        </div>
                        <div class="media-body">
                          <h5 class="media-heading">
                            <span style="font-weight:900">{{ comment.userName }}</span>
                            <i class="el-icon-caret-right"></i>
                            <span style="font-weight:900">{{ comment.replayUserName }}</span>
                          </h5>
                          <div>{{ comment.content }}</div>
                          <div class="menu">
                            <!--                        <span class="glyphicon glyphicon-thumbs-up icon"></span>-->
                            <span
                              @click="reply(comment,answer)" class="comment-icon">
                      <span class="glyphicon glyphicon-comment"></span>
                                    <span></span>
                                </span>
                            <span class="pull-right"
                            >{{ comment.gmtCreate }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                      <input type="text" class="form-control" placeholder="评论一下……"v-model="newCommentContent"
                      >
                      <button type="button" class="btn btn-success pull-right" @click="comment(answer)"
                      >评论
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!--回复输入框-->
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h4>
              提交回复
            </h4>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="comment_section">
              <div class="media">
                <div class="media-left">
                  <a href="#">
                    <img class="media-object img-rounded"
                    >
                  </a>
                </div>
                <div class="media-body">
                  <h5 class="media-heading">
                    <span></span>
                  </h5>
                </div>
              </div>
              <textarea class="form-control comment" rows="6" id="comment_content" v-model="newAnswer.content"></textarea>
              <button type="button" class="btn btn-success btn-comment" @click="addNewAnswer">回复</button>
            </div>
          </div>
        </div>
        <!--右边信息块-->
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h4>发起人：{{question.userName}}</h4>
            <div class="media">
              <div class="media-left">
                <a href="#">
                  <img class="media-object img-rounded" :src="OSS_PATH+question.userAvatar">
                </a>
              </div>
              <div class="media-body">
                <h5 class="media-heading">
                  <span></span>
                </h5>
              </div>
            </div>
          </div>
          <div></div>
          <div></div>
          <!--相关问题-->
          <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h4>相关问题</h4>
            <ul class="question-related">
              <li>
                <a></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import questionApi from '@/api/qa/question'
import answerApi from "@/api/qa/answer";
import commentApi from "@/api/qa/comment";
import Tinymce from '@/components/Tinymce'
import {mapGetters} from 'vuex'
export default {
  components:{Tinymce},
  name: "detail",
  data() {
    return {
      OSS_PATH:process.env.OSS_PATH,
      questionId:'',
      question: {},
      answerList: [{
        content: "我也不知道啊",
        gmtCreate: "2021-03-03 16:20:11",
        id: 1,
        lastTime: null,
        parentId: 0,
        questionId: 1,
        status: 0,
        userId: 1,
        weight: null,
        showComments: false,
        comments: [
          {
            id: 1,
            answerId: null,
            userId: null,
            quserId: null,
            content: "额 就你还是客服啊，这都不知道",
            gmtCreate: "2021-03-03 16:20:11",
          }
        ]
      },
      ],
      newCommentContent: '',
      newAnswer: {
        questionId:'',
        userAvatar:'',
        userName:'',
        content:''
      }
      // answerCount:0,
    }
  },
  computed: {
      ...mapGetters(['name','avatar'])
  },
  created() {
    this.questionId=this.$route.params.id;
    this.getQuestionInfoById();
    this.getAnswerInfo();
  },
  methods: {
    getQuestionInfoById() {
      questionApi.getQuestionById(this.questionId)
        .then(response => {
          this.question = response.data.info;
        })
    },
    getAnswerInfo() {
      answerApi.getAnswerByQid(this.questionId)
        .then(response => {
          this.answerList = response.data.list;
        })
    },
    collapseComments(answer) {

      answer.showComments = !answer.showComments;
      if(!answer.comments)
      {
        commentApi.getCommentByAid(answer.id)
        .then(response=>{
          answer.comments=response.data.list;
        })
      }

    },
    comment(answer){
      // console.log(answer)
      let newComment={};
      newComment.content = this.newCommentContent;
      newComment.answerId = answer.id;
      newComment.replayUserName=answer.userName;
      newComment.userName=this.name;
      newComment.userAvatar=this.avatar;
      newComment.gmtCreate=this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date());
      answer.comments.push(newComment);
      commentApi.addComment(newComment)

      this.newCommentContent='';

    },
    reply(comment,answer){
      const replyUserName=comment.userName;
      this.$prompt('', '回复'+replyUserName, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        let newComment={};
        newComment.content = value;
        newComment.answerId = answer.id;
        newComment.replayUserName=comment.userName;
        newComment.userName=this.name;
        newComment.userAvatar=this.avatar;
        newComment.gmtCreate=this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date());
        answer.comments.push(newComment);
        this.$message({
          type: 'success',
          message: '回复成功',
        });
        commentApi.addComment(newComment)
      });
    },
    addNewAnswer()
    {
      let newAnswer=this.newAnswer;
      newAnswer.userName=this.name;
      newAnswer.userAvatar=this.avatar;
      newAnswer.questionId=this.questionId;
      answerApi.addAnswer(newAnswer).then(res=>{
        console.log(res.data)
        this.answerList.push(res.data.answer)
      })
    },
    dateFormat(fmt, date) {
  let ret;
  const opt = {
    "Y+": date.getFullYear().toString(),        // 年
    "m+": (date.getMonth() + 1).toString(),     // 月
    "d+": date.getDate().toString(),            // 日
    "H+": date.getHours().toString(),           // 时
    "M+": date.getMinutes().toString(),         // 分
    "S+": date.getSeconds().toString()          // 秒
    // 有其他格式化字符需求可以继续添加，必须转化成字符串
  };
  for (let k in opt) {
    ret = new RegExp("(" + k + ")").exec(fmt);
    if (ret) {
      fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
    };
  };
  return fmt;
}
  }
}
</script>

<style scoped>
@import "../../../static/css/bootstrap.css";
@import "../../../static/css/bootstrap-theme.css";
@import "../../../static/css/community.css";
</style>
